<template>
  <div class="app-container">
    <el-form
    :model="queryParams"
    ref="queryForm"
    size="small"
    v-show="showSearch"
    :inline="true"
  >
    <el-form-item label="股道" prop="trackName">
      <el-input
        v-model="queryParams.trackName"
        placeholder="请输入股道"
        style="width: 220px"
        maxlength="15"
        show-word-limit
        clearable
        @keyup.enter.native="handleQuery"
      />
    </el-form-item>
    <el-form-item label="车号" prop="carCode">
      <el-input
        v-model="queryParams.carCode"
        placeholder="请输入车号"
        clearable
        style="width: 220px"
        maxlength="10"
        show-word-limit
        @keyup.enter.native="handleQuery"
      />
    </el-form-item>
    <el-form-item label="插号志人" prop="insertPersonName">
      <el-input
        v-model="queryParams.insertPersonName"
        placeholder="请输入插号志人"
        clearable
        style="width: 220px"
        maxlength="10"
        show-word-limit
        @keyup.enter.native="handleQuery"
      />
    </el-form-item>
    <el-form-item>
      <div class="searchReset">
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </div>
    </el-form-item>
  </el-form>
  <el-row :gutter="10" class="mb8">
    <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
  </el-row>
      <div :class="eleTabTop <= 85 ? 'eleTab' : ''" class="informationTab" ref="eleTab">
          <el-table v-loading="loading" :data="PlanList">
              <el-table-column label="序号" align="center" type="index" width="55" />
              <el-table-column label="股道" prop="trackName" min-width="180" align="center" :show-overflow-tooltip="true" />
              <el-table-column label="列位" prop="complete" min-width="180" align="center" :show-overflow-tooltip="true" />
              <el-table-column label="车号" prop="carCode" min-width="180" align="center" :show-overflow-tooltip="true" />
              <el-table-column label="插号志人" prop="insertPersonName" min-width="180" align="center" :show-overflow-tooltip="true" />
              <el-table-column label="开始时间" prop="startTime" min-width="180" align="center" :show-overflow-tooltip="true" />
                 <el-table-column label="授权人" prop="removeName" min-width="180" align="center" :show-overflow-tooltip="true" />
              <el-table-column label="授权状态" prop="removeStateName" min-width="180" align="center" :show-overflow-tooltip="true" />
              <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="200">
                  <template slot-scope="scope">
                              <!-- <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-edit"
                                @click="handleUpdate(scope.row)"
                                >撤号</el-button
                              > -->
                              <el-button
                              v-if="scope.row.removeState == '0'"
                                size="mini"
                                type="text"
                                 v-hasPermi="['workPlan:workPlan:auth']"
                                @click="handleauthorization(scope.row)"
                                >授权</el-button
                              >
                                <el-button
                                 v-if="scope.row.removeState == '1'"
                                size="mini"
                                type="text"
                                @click="handleremoves(scope.row)"
                                >撤除</el-button
                              >
</template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>

  <!-- 添加或修改作业班组对话框 -->
  <el-dialog :title="title" :visible.sync="open" width="750px" append-to-body>
    <div style="color:red;padding-bottom:10px">您确认要结束整车作业？确认后将联动结束以下单项作业</div>
    <div style="height: 70vh; overflow-y: scroll; padding-right: 15px">
      <el-table
      :data="contentList"
    >
      <el-table-column label="序号" align="center" type="index" width="55" />
      <el-table-column
        label="类型"
        prop="typeName"
        min-width="180"
         align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="插号志人"
        prop="insertPersonName"
        min-width="180"
         align="center"
        :show-overflow-tooltip="true"
      />
       <el-table-column
        label="时间"
        prop="startTime"
        min-width="180"
        align="center"
        :show-overflow-tooltip="true"
      />
    </el-table>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>


   <!-- 授权人员 -->
      <el-dialog title="授权人员" :visible.sync="openUsers" width="750px" append-to-body>
    <div style="height: 70vh; overflow-y: scroll; padding-right: 15px">
      <el-table
      :data="usersList"
      @row-click="singleElection"
    >
      <el-table-column label="序号" width="65">
<template slot-scope="scope">
  <el-radio class="radio" v-model="templateRadio" :label="scope.$index+1">
      &nbsp;</el-radio>
</template>
  </el-table-column>
      <!-- <el-table-column label="序号" align="center" type="index" width="55" /> -->
      <el-table-column
        label="姓名"
        prop="userName"
        min-width="180"
         align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="班组"
        prop="workTeamName"
        min-width="180"
         align="center"
        :show-overflow-tooltip="true"
      />
    </el-table>
    </div>
       <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitFormusers">确 定</el-button>
      <el-button @click="cancelusers">取 消</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
import {
  noplanlist,
  updateplan,
  singlelist,
  planauth,
  userlist
} from "@/api/urgencyRemove";

export default {
  name: "WorkTeam",
  data() {
      return {
          teamId: '',
          templateRadio: '',
          usersList: [],
          openUsers: false,
          contentList: [],
          eleTabTop: 0, //表格容器eleTabTop距浏览器顶部距离
          // 遮罩层
          loading: true,
          // 选中数组
          ids: [],
          // 非单个禁用
          single: true,
          // 非多个禁用
          multiple: true,
          // 显示搜索条件
          showSearch: true,
          // 总条数
          total: 0,
          // 表格数据
          PlanList: [],
          // 弹出层标题
          title: "",
          // 是否显示弹出层
          open: false,
          // 查询参数
          queryParams: {
              pageNum: 1,
              pageSize: 10,
              trackName:null,
              carCode:null,
              insertPersonName:null
          },
          // 表单参数
          form: { privilege: '0', isCross: '0' },
          // 表单校验
          rules: {
              isCross: [{ required: true, message: "跨股道挂号志不能为空", trigger: "blur" }],
              privilege: [{ required: true, message: "第一挂号志者不能为空", trigger: "blur" }],
              name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
          },
            updatequerys:{
            id:'',
            removeId:''
          }
      };
  },
  created() {
      this.getList();
  },
  mounted() {
      // 滚动条的获取
      this.handleScrollx();
      window.addEventListener("scroll", this.handleScrollx, true);
  },
  activated() {
      //获取表格容器距页面头部的距离
      this.handleScrollx();
  },
  destroyed() {
      window.removeEventListener("scroll", this.handleScrollx, true);
  },
  methods: {
               /** 搜索按钮操作 */
  handleQuery() {
    this.queryParams.pageNum = 1;
    this.getList();
  },
      /** 重置按钮操作 */
      resetQuery() {
    this.resetForm("queryForm");
    this.handleQuery();
  },
      handleremoves(row) {
          let params = {}
          params.id = row.id;
          params.removeId = null;
          this.$modal
              .confirm("是否确认撤除授权？")
              .then(function() {
                  return planauth(params);
              })
              .then(() => {
                  this.getList();
                  this.$modal.msgSuccess("修改成功");
              })
              .catch(() => {});
      },
      singleElection(row) {
           this.templateRadio = row.id;
          this.updatequerys.removeId = row.id;
      },
     submitFormusers() {
          planauth(this.updatequerys).then(res => {
              this.msgSuccess("授权成功");
              this.openUsers = false;
              this.getList();
          })
      },
      cancelusers() {
          this.openUsers = false;
      },
      handleauthorization(row) {
          this.teamId = row.id;
            this.updatequerys.id = row.id;
          this.openUsers = true;
          this.templateRadio = undefined;
          userlist().then(res => {
              this.usersList = res.rows;
          })
      },
      //获取表格容器距页面头部的距离
      handleScrollx() {
          this.eleTabTop = this.$refs.eleTab.getBoundingClientRect().top;
      },
      /** 查询作业班组列表 */
      getList() {
          this.loading = true;
          noplanlist(this.queryParams).then((response) => {
              this.PlanList = response.rows;
              this.total = response.total;
              this.loading = false;
          });
      },
      // 取消按钮
      cancel() {
          this.open = false;
      },
      // 表单重置
      reset() {
          this.form = {
              id: null,
              name: null,
              delFlag: null,
              createBy: null,
              createTime: null,
              updateBy: null,
              updateTime: null,
              remark: null,
              privilege: '0',
              isCross: '0'
          };
          this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
          this.queryParams.pageNum = 1;
          this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
          this.resetForm("queryForm");
          this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
          this.ids = selection.map((item) => item.id);
          this.single = selection.length !== 1;
          this.multiple = !selection.length;
      },
      /** 新增按钮操作 */
      handleAdd() {
          this.reset();
          this.open = true;
          this.title = "作业班组-添加";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
          this.reset();
          const id = row.id;
          singlelist(id).then(res => {
              if (res.rows.length > 0) {
                  this.singleId = row.id;
                  this.open = true;
                  this.title = '系统提示'
                  this.contentList = res.rows;
              } else {
                  this.$modal
                      .confirm("是否确认结束整车作业")
                      .then(function() {
                          return updateplan(id);
                      })
                      .then(() => {
                          this.getList();
                          this.$modal.msgSuccess("结束成功");
                      })
                      .catch(() => {});
              }
          })
      },
      /** 提交按钮 */
      submitForm() {
          updateplan(this.singleId).then(res => {
              this.$modal.msgSuccess("撤号成功");
              this.open = false;
              this.getList();
          })
      },
      /** 删除按钮操作 */
      handleDelete(row) {
          const ids = row.id || this.ids;
          this.$modal
              .confirm("是否确认删除作业班组？")
              .then(function() {
                  return delWorkTeam(ids);
              })
              .then(() => {
                  this.getList();
                  this.$modal.msgSuccess("删除成功");
              })
              .catch(() => {});
      },
      /** 导出按钮操作 */
      handleExport() {
          this.download(
              "workTeam/workTeam/export", {
                  ...this.queryParams,
              },
              `workTeam_${new Date().getTime()}.xlsx`
          );
      },
  },
};
</script>

<style>
